<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>中国疫情实时监控</title>
	<link rel="stylesheet" href="../static/css/index.css">
	<script src="../static/js/echarts.js"></script>
	<script src="../static/js/dark.js"></script>
	<script src="../static/js/infographic.js"></script>
	<script src="../static/js/china.js"></script>
	<script src="../static/js/jquery.min.js"></script>
</head>

<body>
	<div class="title">
		<span class="item"></span>
		<span class="watcher"></span>
		<div>中国疫情实时监控</div>
	</div>
	<div id="left1">左1</div>
	<div id="left2">左2</div>
	<div id="center1">

		<div class="item">
			<div class="text1" id="confirm">{{ total_confirm }}</div>
			<div class="text2">累计确诊</div>
		</div>
		<div class="item">
			<div class="text1" id="heal">{{ total_heal }}</div>
			<div class="text2">累计治愈</div>
		</div>

		<div class="item">
			<div class="text1" id="dead">{{ total_dead }}</div>
			<div class="text2">累计死亡</div>
		</div>
		<div class="item">
			<div class="text1" id="nowConfirm">{{ total_nowConfirm }}</div>
			<div class="text2">现有确诊</div>
		</div>
		<div class="item">
			<div class="text1" id="noInfect">{{ total_noInfect }}</div>
			<div class="text2">无症状感染者</div>
		</div>
		<div class="item">
			<div class="text1" id="import">{{ total_import }}</div>
			<div class="text2">境外输入</div>
		</div>
	</div>
	<div id="center2">中2</div>
	<div id="right1">右1</div>
	<div id="right2">右2</div>
</body>

</html>
<script>
    var county_total_list = {{ county_total_list |safe }}
    // 高德地图获取地理位置 获取城市adcode
function getAdCode() {
	$.ajax({
		url: "https://restapi.amap.com/v3/ip",
		type: "POST",
		data: "key=e17802d541158928bbe8cce0b35a5133",
		dataType: "JSON",
		async: false, // 重点：不开启异步请求，获取天气要先获取到城市，城市没有获取到就默认温州
		success: function (json) {
			if (json.info == "OK") {
				adcode = json.adcode;
			} else {
				adcode = 330300; // 默认温州
				console.log("获取城市失败！");
			}
		},
		error: function (xhr) {
			console.log("产生错误" + xhr);
		},
	});
	return adcode;
};
var adcode = getAdCode();

// 显示时间天气
function showTime() {
	var NewAdcode = adcode; // 城市adcode
	var time = new Date();
	var year = time.getFullYear();    //获取完整的年份(4位,1970-????)
	var month = time.getMonth();       //获取当前月份(0-11,0代表1月)
	month = (month + 1 + "").padStart(2, "0"); // 前置补0
	var date = time.getDate();        //获取当前日(1-31)
	date = (date + "").padStart(2, "0");
	var hours = time.getHours();
	hours = (hours + "").padStart(2, "0");
	var minutes = time.getMinutes();
	minutes = (minutes + "").padStart(2, "0");
	var seconds = time.getSeconds();
	seconds = (seconds + "").padStart(2, "0");
	end = year + "年" + month + "月" + date + "日 " + hours + ":" + minutes + ":" + seconds;

	// 根据城市获取天气
	$.ajax({
		type: "POST",
		async: true, // 是否异步请求
		url: 'https://restapi.amap.com/v3/weather/weatherInfo',
		data: "key=e17802d541158928bbe8cce0b35a5133&city=" + NewAdcode,
		success: function (data) {
			var weather = "";
			var lives = data.lives[0];
			if (lives != null && lives.length != 0) {
				weather = `${lives.city + lives.temperature}°C${lives.weather}`;
			}
			$('.title .item').text(end + " " + weather);
		},
		error: function () {
			console.log("error");
		}
	});

}
showTime();
setInterval(showTime, 1000);


// 获取数据
function getDate() {
    center2(county_total_list);
    right1();
    right2();
    left1();
    left2();
}
setInterval(getDate(), 1000 * 60 * 2);

// 中2地图
function center2(data) {

	var myChart = echarts.init(document.getElementById("center2"), 'dark');
	var option = {
		title: {
			text: '',
			left: 'center',
			top: 'center',
		},
		tooltip: {
			trigger: 'item'
		},
		// 左侧小导航图标
		visualMap: {
			show: true,
			x: 'left',
			y: 'bottom',
			textStyle: {
				fontSize: 8,
				color: '#0ff'
			},
			splitList: [
				{
					start: 1, end: 9
				},
				{
					start: 10, end: 99
				},
				{
					start: 100, end: 999
				},
				{
					start: 1000, end: 9999
				},
				{
					start: 10000
				}
			],
			color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
		},
		series: [{
			name: '累计确诊人数',
			type: 'map',
			mapType: 'china',
			roam: false, // 禁用拖动和缩放
			// 图形样式
			itemStyle: {
				normal: {
					borderWidth: .5, // 区域边框宽度
					borderColor: '#009FE8', // 区域边框颜色
					areaColor: '#FFEFD5', // 区域颜色
				},
				emphasis: { // 鼠标滑过地图高亮的相关设置
					borderWidth: .5,
					borderColor: '#4B0082',
					areaColor: '#FFF',
				},
			},

			// 图形上的文本标签
			label: {
				normal: {
					show: true, // 省份名称
					fontSize: 8,
				},
				emphasis: {
					show: true,
					fontSize: 8,
				}
			},
			// [{'name': '上海', 'value': 11},{'name': '北京', 'value': 12},]
			data: data
		}]
	};
	myChart.setOption(option);

}

// 右1柱状图
function right1() {
    var qg_count_list = {{ qg_count_list | safe }}
    var qg_list = {{ qg_list|safe }}
	var myChart = echarts.init(document.getElementById("right1"), 'dark');
	var option = {
		title: {
			text: '全国确诊省市TOP8',
			left: 'left',
			top: 'top',
		},
		xAxis: {
			type: 'category',
			data: qg_list,
			axisLabel: {
				inside: true,
				color: '#0f0'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			z: 10
		},
		yAxis: {
			type: 'value',
			data: ['10k', '20k', '30k', '40k', '50k', '60k', '70k'],
			axisLabel: {
				show: true,
				color: 'green',
				fontSize: 12,
				formatter: function (value) {
					if (value >= 1000) {
						value = value / 1000 + 'k';
					}
					return value;
				}
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
		},
		series: [
			{
				data: qg_count_list,
				type: 'bar'
			}
		]
	};
	myChart.setOption(option);
}

// 右2饼图
function right2() {
    var jwsr = {{ jwsr |safe }}
	var myChart = echarts.init(document.getElementById("right2"), 'dark');
	var option = {
		title: {
			text: '境外输入省市TOP5',
			left: 'center',
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		series: [
			{
				name: '境外输入',
				type: 'pie',
				radius: '50%',
				data: jwsr,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};
	myChart.setOption(option);
}

// 左1图
function left1() {
	var myChart = echarts.init(document.getElementById("left1"), 'dark');
	var option = {
		title: {
			text: '全国累计趋势',
			left: 'left',
		},
		tooltip: {
			trigger: 'axis'
		  },
		// 图例项
		legend: {
			// orient: 'vertical',
			left: 'right',
			data: ['累计治愈', '累计死亡', "累计确诊"]
		},
		xAxis: {
			type: 'category',
			data: {{ result1|safe }},
			axisLabel: {
				color: 'rgb(255, 0, 0)'
			}
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				show: true,
				color: 'pink',
				fontSize: 12,
				formatter: function (value) {
					if (value >= 1000) {
						value = value / 1000 + 'k';
					}
					return value;
				}
			},
		},
		series: [
			{
				name: '累计治愈',
				data: {{ result2 |safe }},
				type: 'line'
			},
			{
				name: '累计死亡',
				data: {{ result3 | safe }},
				type: 'line'
			},
			{
				name: '累计确诊',
				data: {{ result4 | safe }},
				type: 'line'
			},
		]
	};
	myChart.setOption(option);
}

// 左2图
function left2(data) {
	var myChart = echarts.init(document.getElementById("left2"), 'dark');
	var option = {
		title: {
			text: '全国新增趋势',
			left: 'left',
		},
		tooltip: {
			trigger: 'axis'
		  },
		// 图例项
		legend: {
			// orient: 'vertical',
			left: 'right',
			data: ['新增确诊', '新增疑似', "新增境外输入"]
		},
		xAxis: {
			type: 'category',
			data: {{ result5 | safe }}
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				show: true,
				color: 'white',
				fontSize: 12,
				formatter: function (value) {
					if (value >= 1000) {
						value = value / 1000 + 'k';
					}
					return value;
				}
			},
		},
		series: [
			{
				name: '新增确诊',
				data: {{ result6 | safe}},
				type: 'line',
				smooth: true
			},
			{
				name: '新增疑似',
				data: {{ result7 | safe}},
				type: 'line',
				smooth: true
			},
			{
				name: '新增境外输入',
				data: {{ result8 | safe}},
				type: 'line',
				smooth: true
			},
		]
	};

	myChart.setOption(option);
}


</script>